<template>
  <PageHeadFooter class="transportation-slot" page="transportation">
    <div class="crumbs">
      <div style="height: 100%" class="container flex-y-center font-18 color-fff">
        <div style="height: 100%" class="m-x-40 flex-y-center font-18 color-fff">
          <span @click="$router.push('/')" class="cspt m-r-4">HOME</span>
          <span class="m-r-4">>></span>
          <span class="m-r-4">TRANSPORTATION</span>
        </div>
      </div>
    </div>
    <div class="transportation-page">
      <div class="container">
        <div class="main-title">China Railway Express</div>
        <div class="intro-content">
          <p class="intro-text">
            China Railway Express operates in accordance with fixed train numbers, routes, schedules and full operation timetables, which is the international intermodal train for containers between China and Europe and countries along the Belt and Road. In recent years, thanks to the Belt and Road Initiative, CR Express has gradually gained wide recognition by Chinese and European clients due to its comparative advantages in timeliness, price, capacity, safety, and overall service. It has become a viable logistics alternative to sea and air transport between China and Europe. With continued and stable improvement in both quantity and quality, CR Express now reaches more than 200 cities in over 20 European countries.
          </p>
          <p class="intro-text">
            We have established solid cooperation partnership with our clients offering container delivery from main ports in China such as Wuhan, Chongqing, Suzhou, Zhengzhou, Changsha, Hefei, Chengdu, Yiwu, etc. to Europe area by railway through Hanxinou, Yuxinouu, Sumanou, Zhengxinou, Xiangmanou, Hexinou, Rongxinou, Yixinou.
          </p>
        </div>
        <img src="@/assets/images/routes.png" alt="" class="routes-img" @click="openPreview">
        <div v-if="showPreview" class="img-preview-mask" @click="closePreview">
          <img src="@/assets/images/routes.png" class="img-preview" @click.stop>
        </div>
        <div class="section-title">Railway Routes</div>
        <div class="routes-list">
          <div class="route-card" v-for="route in routes" :key="route.title">
            <div class="route-title">{{ route.title }}</div>
            <div class="route-info">
              <div class="info-item"><span class="info-label">Route:</span> {{ route.route }}</div>
              <div class="info-item"><span class="info-label">Schedule:</span> {{ route.schedule }}</div>
              <div class="info-item"><span class="info-label">Time:</span> {{ route.time }}</div>
              <div class="info-item"><span class="info-label">Off hire locations:</span> {{ route.offhire }}</div>
            </div>
          </div>
        </div>
        <div class="section-title">Other Services</div>
        <div class="service-card">
          <div class="service-title">Railway Delivery</div>
          <div class="service-content">
            <p>Cooperating with our partner, we offer container delivery from other ports to middle east via China or move them back to China or SEA area with railway or other multimodal transportation way.</p>
            <p>With fewer unnecessary operators and our solid agencies overseas, we can offer competitive price and better services.</p>
            <p><strong>Main POL/POD locations in middle include:</strong> Almaty, Astana, Tashkent, Chukursay, Sergeli, Bishkek, Alamedin, Dushanbe</p>
            <p><strong>Main off hire locations:</strong> Warsaw, Hamburg, Gdynia, Prague.</p>
          </div>
        </div>
        <div class="service-card">
          <div class="service-title">Container Delivery within EU</div>
          <div class="service-content">
            <p>Container transportation service is one of the services offered by our company. We offer a comprehensive shipping container transportation service in EU area. We transport general cargo in standardized TEU containers, providing our customers with safe, efficient and timely deliveries.</p>
            <p>We have our contracted local transportation agency and cooperate with a number of reputable sea carriers, which allows us to be flexible and adapt to our customers' needs.</p>
            <p>Transportation of shipping containers is our specialty, so we provide high quality services and competitive prices. We are ready to meet any transportation challenge, regardless of the type of containers being transported and the distance between the point of loading and the destination.</p>
            <p>Trust us and use our shipping container transportation service to make your deliveries faster and more efficient!</p>
            <div class="feature-highlight">
              <div class="feature-title">HDS (Hydraulic Truck Crane) Unloading</div>
              <p>HDS unloading is the process of unloading goods from trucks, using a special hydraulic crane that is mounted on a car or trailer. HDS unloading allows heavy and bulky goods to be unloaded quickly and safely, without the need for other lifting or manual handling equipment.</p>
              <p>In order to facilitate the delivery of our customers, we are able to arrange HDS unloading, at the indicated location both at POL and POD locations.</p>
            </div>

            <p>The price of shipping container transport depends on many factors, such as the distance between ports, the type and size of the container, as well as the date and time of delivery. In addition, the cost of transporting containers can vary depending on the shipping carrier and the state of the market. For specific information on the price of shipping a sea container, contact us and get a customized quote, taking into account all the factors mentioned.</p>
            <p>Our transportation company offers a range of services related to shipping containers, including transportation, sales and storage. Our services are customized to meet the individual needs of our clients, so we can offer comprehensive solutions for shipping containers.</p>
            <p>Transportation of shipping containers - we carry out transportation in a timely and safe manner, using proven and modern methods.</p>
            <p>Thanks to our services, customers can enjoy a professional and comprehensive approach, as well as increase their brand recognition with container wrapping service.</p>
          </div>
        </div>
      </div>
    </div>
  </PageHeadFooter>
</template>

<script>
import PageHeadFooter from "../index/components/page-head-footer.vue";
export default {
  components: { PageHeadFooter },
  data() {
    return {
      showPreview: false,
      routes: [
        {
          title: 'Hanxinou',
          route: 'Wuhan – Alashankou – Mala of Poland – Hamburg or Duisburg of Germany',
          schedule: 'Wednesday and Friday each week',
          time: '12 days to Poland and 15 days to Hamburg',
          offhire: 'Warsaw, Duisburg, Hamburg'
        },
        {
          title: 'Yuxinou',
          route: 'Chongqing – Alashankou – Mala of Poland – Hamburg or Duisburg of Germany',
          schedule: 'Monday, Thursday and Saturday each week',
          time: '12 days to Poland and 16 days to Hamburg',
          offhire: 'Warsaw, Duisburg, Hamburg'
        },
        {
          title: 'Sumanou',
          route: 'Suzhou – Manzhouli – Warsaw of Poland – Hamburg or Duisburg of Germany',
          schedule: 'Saturday each week',
          time: '12 days to Warsaw Poland and 15-17 days to Hamburg, 16-18 days to Duisburg',
          offhire: 'Duisburg, Hamburg'
        },
        {
          title: 'Zhengxinou',
          route: 'Zhengzhou – Warsaw of Poland – Hamburg of Germany',
          schedule: 'Tuesday, Thursday, Saturday each week',
          time: '12 -15/16 days to Hamburg',
          offhire: 'Warsaw, Hamburg, Gdynia, Prague'
        }
      ]
    }
  },
  methods: {
    openPreview() {
      this.showPreview = true;
    },
    closePreview() {
      this.showPreview = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.transportation-slot {
  .crumbs {
    height: 60px;
    border-top: 2px;
    background: url("../detail/continer_img/crumbs-bg.jpg") repeat center center;
  }
}
.transportation-page {
  background: #f7f7f7;
  min-height: 100vh;
  padding: 0 0 40px 0;
  .container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 40px 0 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #eee;
  }
  .main-title {
    font-size: 28px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 24px;
    line-height: 1.3;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
  }
  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin: 32px 0 16px 0;
    line-height: 1.3;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
  }
  .intro-content {
    margin-bottom: 24px;
    .intro-text {
      font-size: 15px;
      color: #333;
      line-height: 1.8;
      margin-bottom: 10px;
      text-align: left;
    }
  }
  .routes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .route-card {
      background: #fafbfc;
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 20px 24px;
      flex: 1 1 45%;
      min-width: 320px;
      margin-bottom: 0;
      .route-title {
        font-size: 17px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 10px;
      }
      .route-info {
        .info-item {
          font-size: 14px;
          color: #555;
          margin-bottom: 6px;
          .info-label {
            color: #888;
            font-weight: 500;
            margin-right: 4px;
          }
        }
      }
    }
  }
  .service-card {
    background: #fafbfc;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
    .service-title {
      font-size: 17px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 10px;
    }
    .service-content {
      font-size: 14px;
      color: #555;
      line-height: 1.8;
      p {
        margin-bottom: 8px;
      }
      .feature-highlight {
        background: #f2f6fa;
        border-left: 3px solid #2495ff;
        border-radius: 4px;
        padding: 10px 16px;
        margin: 12px 0;
        .feature-title {
          font-size: 15px;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 6px;
        }
      }
      .service-list {
        margin: 10px 0 0 0;
        padding-left: 18px;
        li {
          list-style: disc;
          margin-bottom: 4px;
        }
      }
    }
  }
  .routes-img {
    display: block;
    margin: 10px auto 10px auto;
    max-width: 100%;
    width: 80%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: zoom-in;
  }
  .img-preview-mask {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
  }
  .img-preview {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    background: #fff;
    cursor: zoom-out;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @media (max-width: 768px) {
    .routes-img {
      width: 100%;
      max-width: 100%;
      margin: 20px auto 16px auto;
    }
  }
}
</style>
